<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { UserFilled, Search, Edit, Delete, View, Plus, Setting, Refresh } from '@element-plus/icons-vue'
import request from '@/utils/request'

const router = useRouter()
const searchQuery = ref('')
const loading = ref(false)
const partners = ref<any[]>([])

// 筛选相关
const statusFilter = ref('')

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 新增파트너相关
const showCreateDialog = ref(false)
const createLoading = ref(false)
const createFormRef = ref<FormInstance>()
const createForm = ref({
  loginId: '',
  email: '',
  password: '',
  realName: '',
  phoneNumber: '',
  nickname: '',
  isActive: true
})

const createRules: FormRules = {
  loginId: [{ required: true, message: '로그인 ID를 입력하세요', trigger: 'blur' }],
  email: [
    { required: true, message: '이메일을 입력하세요', trigger: 'blur' },
    { type: 'email', message: '이메일 형식이 올바르지 않습니다', trigger: ['blur', 'change'] }
  ],
  password: [
    { required: true, message: '비밀번호를 입력하세요', trigger: 'blur' },
    { min: 8, message: '최소 8자 이상 입력하세요', trigger: 'blur' }
  ],
  realName: [{ required: true, message: '실명을 입력하세요', trigger: 'blur' }],
  phoneNumber: [
    { required: true, message: '휴대폰 번호를 입력하세요', trigger: 'blur' }
  ]
}

// 편집파트너相关
const showEditDialog = ref(false)
const editLoading = ref(false)
const editFormRef = ref<FormInstance>()
const selectedPartner = ref<any>(null)
const editForm = ref({
  realName: '',
  phoneNumber: '',
  nickname: '',
  isActive: true
})

const editRules: FormRules = {
  realName: [{ required: true, message: '실명을 입력하세요', trigger: 'blur' }],
  phoneNumber: [
    { required: true, message: '휴대폰 번호를 입력하세요', trigger: 'blur' }
  ]
}

// 비밀번호 재설정相关
const showPasswordDialog = ref(false)
const passwordLoading = ref(false)
const passwordFormRef = ref<FormInstance>()
const passwordForm = ref({
  password: '',
  confirm: ''
})

const passwordRules: FormRules = {
  password: [
    { required: true, message: '비밀번호를 입력하세요', trigger: 'blur' },
    { min: 8, message: '최소 8자 이상 입력하세요', trigger: 'blur' }
  ],
  confirm: [
    { required: true, message: '비밀번호를 다시 입력하세요', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.password) {
          callback(new Error('두 비밀번호가 일치하지 않습니다'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 获取合作伙伴列表
async function fetchPartners() {
  loading.value = true
  try {
    const params: any = {
      page: currentPage.value,
      limit: pageSize.value
    }
    if (searchQuery.value) params.search = searchQuery.value
    if (statusFilter.value) params.status = statusFilter.value

    const { data } = await request.get('/api/admin/partners', { params })
    partners.value = data.partners
    total.value = data.total
  } catch (error) {
    ElMessage.error('파트너 목록 가져오기 실패')
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  currentPage.value = 1
  fetchPartners()
}

// 筛选处理
function handleFilterChange() {
  currentPage.value = 1
  fetchPartners()
}

// 删除合作伙伴
const deletePartner = async (partner: any) => {
  try {
    await ElMessageBox.confirm(
      `"${partner.realName}" 파트너를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.`,
      '파트너 삭제 확인',
      {
        confirmButtonText: '삭제',
        cancelButtonText: '취소',
        type: 'warning',
      }
    )

    const response = await request.delete(`/api/admin/partners/${partner.id}`)
    const result = response.data

    if (result.success) {
      ElMessage.success(result.message || '파트너가 삭제되었습니다')
      fetchPartners() // 목록 새로고침
    } else {
      ElMessage.error(result.error || '삭제 실패')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('삭제 중 오류가 발생했습니다')
    }
  }
}

// 分页处理
function handlePageChange(page: number) {
  currentPage.value = page
  fetchPartners()
}

// 格式化状态
function getStatusLabel(isActive: boolean) {
  return isActive ? '활성' : '비활성'
}

// 格式化佣金
function formatCommission(rate: number) {
  return `${(rate * 100).toFixed(1)}%`
}

// 格式化日期
function formatDate(dateString: string) {
  return new Date(dateString).toLocaleString('ko-KR')
}

// 查看파트너详情 - 占位函数，后续实现
function viewPartner(partner: any) {
  ElMessage.info('查看功能正在开发中')
}

// 编辑파트너
function editPartner(partner: any) {
  selectedPartner.value = partner
  editForm.value = {
    realName: partner.realName || '',
    phoneNumber: partner.phoneNumber || '',
    nickname: partner.user?.nickname || '',
    isActive: !!partner.isActive
  }
  showEditDialog.value = true
}

// 保存파트너编辑
async function savePartnerEdit() {
  if (!editFormRef.value || !selectedPartner.value) return

  try {
    await editFormRef.value.validate()
  } catch {
    return
  }

  editLoading.value = true
  try {
    await request.put(`/api/admin/partners/${selectedPartner.value.id}`, {
      realName: editForm.value.realName,
      phoneNumber: editForm.value.phoneNumber,
      nickname: editForm.value.nickname,
      isActive: editForm.value.isActive
    })
    ElMessage.success('파트너 정보가 성공적으로 수정되었습니다')
    showEditDialog.value = false
    await fetchPartners() // 刷新列表
  } catch (error: any) {
    ElMessage.error(error.response?.data?.error || '파트너 정보 수정 실패')
  } finally {
    editLoading.value = false
  }
}

// 새 파트너 추가
function openCreatePartner() {
  createForm.value = {
    loginId: '',
    email: '',
    password: '',
    realName: '',
    phoneNumber: '',
    nickname: '',
    isActive: true
  }
  showCreateDialog.value = true
}

// 创建파트너
async function createPartner() {
  if (!createFormRef.value) return

  try {
    await createFormRef.value.validate()
  } catch {
    return
  }

  createLoading.value = true
  try {
    await request.post('/api/admin/partners', createForm.value)
    ElMessage.success('파트너가 성공적으로 생성되었습니다')
    showCreateDialog.value = false
    await fetchPartners() // 刷新列表
  } catch (error: any) {
    ElMessage.error(error.response?.data?.error || '파트너 생성 실패')
  } finally {
    createLoading.value = false
  }
}

// 重置密码
function resetPassword(partner: any) {
  selectedPartner.value = partner
  passwordForm.value = {
    password: '',
    confirm: ''
  }
  showPasswordDialog.value = true
}

// 提交密码重置
async function submitPasswordReset() {
  if (!passwordFormRef.value || !selectedPartner.value) return

  try {
    await passwordFormRef.value.validate()
  } catch {
    return
  }

  passwordLoading.value = true
  try {
    await request.put(`/api/admin/partners/${selectedPartner.value.id}/password`, {
      password: passwordForm.value.password
    })
    ElMessage.success('비밀번호가 성공적으로 재설정되었습니다')
    showPasswordDialog.value = false
  } catch (error: any) {
    ElMessage.error(error.response?.data?.error || '비밀번호 재설정 실패')
  } finally {
    passwordLoading.value = false
  }
}

// 切换파트너状态
async function toggleStatus(partner: any) {
  const newStatus = !partner.isActive
  const actionText = partner.isActive ? '비활성화' : '활성화'
  const resultText = partner.isActive ? '비활성화됨' : '활성화됨'

  try {
    await ElMessageBox.confirm(
      `${partner.realName}을(를) ${actionText}하시겠습니까?`,
      '상태 변경 확인',
      { type: 'warning' }
    )

    await request.put(`/api/admin/partners/${partner.id}`, {
      isActive: newStatus
    })

    ElMessage.success(resultText)
    await fetchPartners() // 刷新列表
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error(error.response?.data?.error || '작업 실패')
    }
  }
}

// 查看하위 사용자
function viewReferrals(partner: any) {
  // 跳转到회원 관리页面，并带上 referrerId 筛选条件
  router.push({
    path: '/members',
    query: {
      referrerId: partner.user?.id,
      referrerName: partner.realName
    }
  })
}

onMounted(() => {
  fetchPartners()
})
</script>

<template>
  <div class="partners-view">
    <div class="page-header">
      <div class="header-content">
        <el-icon class="page-icon" size="24">
          <UserFilled />
        </el-icon>
        <div class="header-text">
          <h1 class="page-title">파트너 관리</h1>
          <p class="page-subtitle">비즈니스 파트너를 관리합니다</p>
        </div>
      </div>
    </div>

    <div class="page-content">
      <!-- 搜索栏 -->
      <div class="search-section">
        <el-input
          v-model="searchQuery"
          placeholder="이름/추천코드/로그인ID/이메일/휴대폰번호 검색"
          :prefix-icon="Search"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" :loading="loading" />
          </template>
        </el-input>
      </div>

      <!-- 筛选栏和操作栏 -->
      <div class="filter-section">
        <div class="filter-row">
          <el-select
            v-model="statusFilter"
            placeholder="상태"
            clearable
            size="small"
            @change="handleFilterChange"
          >
            <el-option label="활성화" value="true" />
            <el-option label="비활성화" value="false" />
          </el-select>

          <div class="stats-info">
            <span class="total-count">총 {{ total }}명</span>
          </div>
        </div>

        <div class="action-row">
          <el-button
            type="primary"
            :icon="Plus"
            @click="openCreatePartner"
            size="small"
          >
            새 파트너 추가
          </el-button>
        </div>
      </div>

      <!-- 파트너 목록 -->
      <div class="partners-list" v-loading="loading">
        <div v-for="partner in partners" :key="partner.id" class="partner-card">
          <div class="partner-info">
            <el-avatar :size="40" :icon="UserFilled" />
            <div class="partner-details">
              <div class="partner-name">
                <span>{{ partner.realName }}</span>
                <span v-if="partner.user?.nickname" class="nickname">({{ partner.user.nickname }})</span>
              </div>
              <div class="partner-email">{{ partner.user?.email }}</div>
              <div class="partner-extra-info">
                <div class="referral-code-info">
                  <span class="label">추천 코드:</span>
                  <span class="referral-code">{{ partner.referralCode }}</span>
                </div>
                <div class="login-info">
                  <span class="label">로그인 ID:</span>
                  <span class="login-id">{{ partner.user?.loginId }}</span>
                </div>
                <div v-if="partner.phoneNumber" class="phone-info">
                  <span class="label">휴대폰:</span>
                  <span class="phone">{{ partner.phoneNumber }}</span>
                </div>
                <div class="created-info">
                  <span class="label">생성:</span>
                  <span class="created-date">{{ formatDate(partner.createdAt) }}</span>
                </div>
              </div>
              <div class="partner-meta">
                <el-tag size="small" :type="partner.isActive ? 'success' : 'info'">
                  {{ getStatusLabel(partner.isActive) }}
                </el-tag>
                <el-tag v-if="partner.commissionRate" size="small" type="warning">
                  {{ formatCommission(partner.commissionRate) }}
                </el-tag>
              </div>
            </div>
          </div>
          <div class="partner-actions">
            <el-button size="small" :icon="View" circle @click="viewPartner(partner)" />
            <el-button size="small" :icon="Edit" circle @click="editPartner(partner)" />
            <el-dropdown trigger="click" placement="bottom-end">
              <el-button size="small" :icon="Setting" circle />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="resetPassword(partner)">
                    <el-icon><Refresh /></el-icon>
                    비밀번호 재설정
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click="toggleStatus(partner)"
                    :class="partner.isActive ? 'danger-item' : 'success-item'"
                  >
                    <el-icon v-if="partner.isActive"><Delete /></el-icon>
                    <el-icon v-else><Plus /></el-icon>
                    {{ partner.isActive ? '비활성화' : '활성화' }}
                  </el-dropdown-item>
                  <el-dropdown-item @click="viewReferrals(partner)">
                    <el-icon><UserFilled /></el-icon>
                    하위 사용자
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="deletePartner(partner)">
                    <el-icon><Delete /></el-icon>
                    삭제
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>

        <div v-if="!loading && partners.length === 0" class="empty-state">
          <el-icon size="48"><UserFilled /></el-icon>
          <p>등록된 파트너가 없습니다</p>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination" v-if="total > pageSize">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 새 파트너 추가 弹窗 -->
    <el-dialog
      v-model="showCreateDialog"
      title="새 파트너 추가"
      width="90%"
      :show-close="true"
      :close-on-click-modal="false"
    >
      <div class="create-form-container">
        <el-form
          :model="createForm"
          :rules="createRules"
          ref="createFormRef"
          label-position="top"
          class="create-form"
        >
          <el-form-item label="로그인 ID" prop="loginId">
            <el-input
              v-model="createForm.loginId"
              placeholder="로그인 ID를 입력하세요"
              clearable
            />
          </el-form-item>

          <el-form-item label="이메일" prop="email">
            <el-input
              v-model="createForm.email"
              type="email"
              placeholder="이메일을 입력하세요"
              clearable
            />
          </el-form-item>

          <el-form-item label="비밀번호" prop="password">
            <el-input
              v-model="createForm.password"
              type="password"
              show-password
              placeholder="비밀번호를 입력하세요 (최소 8자)"
              clearable
            />
          </el-form-item>

          <el-form-item label="실명" prop="realName">
            <el-input
              v-model="createForm.realName"
              placeholder="실명을 입력하세요"
              clearable
            />
          </el-form-item>

          <el-form-item label="휴대폰 번호" prop="phoneNumber">
            <el-input
              v-model="createForm.phoneNumber"
              placeholder="휴대폰 번호를 입력하세요"
              clearable
            />
          </el-form-item>

          <el-form-item label="닉네임">
            <el-input
              v-model="createForm.nickname"
              placeholder="닉네임을 입력하세요 (선택사항)"
              clearable
            />
          </el-form-item>

          <el-form-item label="활성화 상태">
            <el-switch
              v-model="createForm.isActive"
              active-text="활성화"
              inactive-text="비활성화"
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="create-footer">
          <el-button @click="showCreateDialog = false">취소</el-button>
          <el-button
            type="primary"
            :loading="createLoading"
            @click="createPartner"
          >
            생성
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 파트너 편집 弹窗 -->
    <el-dialog
      v-model="showEditDialog"
      title="파트너 정보 편집"
      width="90%"
      :show-close="true"
      :close-on-click-modal="false"
    >
      <div v-if="selectedPartner" class="edit-form-container">
        <div class="edit-header">
          <el-avatar :size="50" :icon="UserFilled" />
          <div class="edit-header-info">
            <h4>{{ selectedPartner.realName }}</h4>
            <p>{{ selectedPartner.user?.email }}</p>
            <div class="referral-code-display">
              <span class="label">추천 코드:</span>
              <span class="code">{{ selectedPartner.referralCode }}</span>
            </div>
          </div>
        </div>

        <el-form
          :model="editForm"
          :rules="editRules"
          ref="editFormRef"
          label-position="top"
          class="edit-form"
        >
          <el-form-item label="실명" prop="realName">
            <el-input
              v-model="editForm.realName"
              placeholder="실명을 입력하세요"
              clearable
            />
          </el-form-item>

          <el-form-item label="휴대폰 번호" prop="phoneNumber">
            <el-input
              v-model="editForm.phoneNumber"
              placeholder="휴대폰 번호를 입력하세요"
              clearable
            />
          </el-form-item>

          <el-form-item label="닉네임">
            <el-input
              v-model="editForm.nickname"
              placeholder="닉네임을 입력하세요 (선택사항)"
              clearable
            />
          </el-form-item>

          <el-form-item label="활성화 상태">
            <el-switch
              v-model="editForm.isActive"
              active-text="활성화"
              inactive-text="비활성화"
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="edit-footer">
          <el-button @click="showEditDialog = false">취소</el-button>
          <el-button
            type="primary"
            :loading="editLoading"
            @click="savePartnerEdit"
          >
            저장
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 비밀번호 재설정 弹窗 -->
    <el-dialog
      v-model="showPasswordDialog"
      title="비밀번호 재설정"
      width="90%"
      :show-close="true"
      :close-on-click-modal="false"
    >
      <div v-if="selectedPartner" class="password-form-container">
        <div class="password-header">
          <el-avatar :size="50" :icon="UserFilled" />
          <div class="password-header-info">
            <h4>{{ selectedPartner.realName }}</h4>
            <p>{{ selectedPartner.user?.email }}</p>
            <div class="warning-text">
              <el-icon><Refresh /></el-icon>
              <span>새 비밀번호를 설정하세요</span>
            </div>
          </div>
        </div>

        <el-form
          :model="passwordForm"
          :rules="passwordRules"
          ref="passwordFormRef"
          label-position="top"
          class="password-form"
        >
          <el-form-item label="새 비밀번호" prop="password">
            <el-input
              v-model="passwordForm.password"
              type="password"
              show-password
              placeholder="새 비밀번호를 입력하세요 (최소 8자)"
              clearable
            />
          </el-form-item>

          <el-form-item label="비밀번호 확인" prop="confirm">
            <el-input
              v-model="passwordForm.confirm"
              type="password"
              show-password
              placeholder="비밀번호를 다시 입력하세요"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="password-footer">
          <el-button @click="showPasswordDialog = false">취소</el-button>
          <el-button
            type="primary"
            :loading="passwordLoading"
            @click="submitPasswordReset"
          >
            재설정
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.partners-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-icon {
  color: var(--el-color-primary);
}

.header-text {
  flex: 1;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 4px 0;
}

.page-subtitle {
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin: 0;
}

.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-section {
  width: 100%;
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.filter-row .el-select {
  flex: 1;
  min-width: 0;
}

.stats-info {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.total-count {
  font-size: 12px;
  color: var(--el-text-color-regular);
  font-weight: 500;
}

.action-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.partners-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.partner-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
}

.partner-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.partner-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.partner-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.nickname {
  font-size: 12px;
  color: var(--el-text-color-regular);
  font-weight: normal;
}

.partner-email {
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-bottom: 4px;
}

.partner-extra-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
  font-size: 11px;
}

.partner-extra-info .label {
  color: var(--el-text-color-secondary);
  margin-right: 4px;
}

.referral-code-info, .login-info, .phone-info, .created-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.referral-code {
  color: var(--el-color-primary);
  font-weight: 500;
  font-family: monospace;
  background: var(--el-fill-color-light);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}

.login-id {
  color: var(--el-text-color-primary);
  font-weight: 500;
}

.phone {
  color: var(--el-text-color-primary);
  font-family: monospace;
}

.created-date {
  color: var(--el-text-color-secondary);
  font-size: 10px;
}

.partner-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.partner-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
    gap: 12px;
  }

  .filter-row .el-select {
    width: 100%;
  }

  .partner-card {
    padding: 12px;
  }

  .partner-info {
    gap: 10px;
  }

  .partner-details {
    min-width: 0;
    flex: 1;
  }

  .partner-name {
    font-size: 13px;
  }

  .partner-email {
    font-size: 11px;
  }

  .partner-extra-info {
    font-size: 10px;
  }

  .partner-actions {
    gap: 6px;
  }

  .partner-actions .el-button {
    padding: 6px;
  }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
  .page-content {
    gap: 12px;
  }

  .search-section .el-input {
    font-size: 14px;
  }

  .partner-card {
    padding: 10px;
  }

  .partner-info {
    gap: 8px;
  }

  .partner-extra-info {
    display: none; /* 在超小屏幕上隐藏额外信息 */
  }

  .partner-meta .el-tag {
    font-size: 10px;
    padding: 0 4px;
    height: 20px;
    line-height: 18px;
  }
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--el-text-color-secondary);
}

.empty-state p {
  margin: 8px 0 0 0;
  font-size: 14px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.partner-commission {
  font-size: 12px;
  color: var(--el-color-primary);
  font-weight: 500;
}

.placeholder-notice {
  margin-top: 20px;
}

/* 下拉菜单项样式 */
.danger-item {
  color: var(--el-color-danger) !important;
}

.success-item {
  color: var(--el-color-success) !important;
}

/* 새 파트너 추가 弹窗样式 */
.create-form-container {
  padding: 0;
}

.create-form {
  margin: 0;
}

.create-form .el-form-item {
  margin-bottom: 20px;
}

.create-form .el-form-item__label {
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 8px;
}

.create-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 파트너 편집 弹窗样式 */
.edit-form-container {
  padding: 0;
}

.edit-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  margin-bottom: 20px;
}

.edit-header-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.edit-header-info p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.referral-code-display {
  display: flex;
  align-items: center;
  gap: 4px;
}

.referral-code-display .label {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.referral-code-display .code {
  font-size: 12px;
  color: var(--el-color-primary);
  font-weight: 500;
  font-family: monospace;
  background: var(--el-fill-color-light);
  padding: 2px 6px;
  border-radius: 4px;
}

.edit-form {
  margin: 0;
}

.edit-form .el-form-item {
  margin-bottom: 20px;
}

.edit-form .el-form-item__label {
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 8px;
}

.edit-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 暗黑模式适配 */
:root.dark .partner-card {
  background: var(--el-bg-color);
  border-color: var(--el-border-color);
}

:root.dark .edit-header {
  border-bottom-color: var(--el-border-color);
}

/* 비밀번호 재설정 弹窗样式 */
.password-form-container {
  padding: 0;
}

.password-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  margin-bottom: 20px;
}

.password-header-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.password-header-info p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--el-text-color-regular);
}

.warning-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--el-color-warning);
}

.password-form {
  margin: 0;
}

.password-form .el-form-item {
  margin-bottom: 20px;
}

.password-form .el-form-item__label {
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 8px;
}

.password-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 暗黑模式适配 - 비밀번호 弹窗 */
:root.dark .password-header {
  border-bottom-color: var(--el-border-color);
}
</style>
